<template>
  <div>
    <div class="nav">
      <el-row :gutter="0">
        <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="6">
          <div class="grid-content bg-purple-light">个人信息展示</div>
        </el-col>
        <el-col :xs="2" :sm="2" :md="2" :lg="1" :xl="2">
          <div class="grid-content bg-purple">
            <router-link to="/shop">首页</router-link>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="11" :xl="2">
          <div class="grid-content bg-purple-light"></div>
        </el-col>
        <el-col :xs="2" :sm="2" :md="2" :lg="1" :xl="6">
          <div class="grid-content bg-purple">联系客服</div>
        </el-col>
        <el-col :xs="2" :sm="2" :md="2" :lg="1" :xl="6">
          <div class="grid-content bg-purple-light">
            <router-link to="/shop/car">购物车</router-link>
          </div>
        </el-col>
        <el-col :xs="2" :sm="2" :md="2" :lg="1" :xl="2">
          <div class="grid-content bg-purple">
            <router-link to="/shop/my">我的</router-link>
          </div>
        </el-col>
        <el-col :xs="2" :sm="2" :md="2" :lg="1" :xl="2">
          <div class="grid-content bg-purple-light">
            <router-link to="/shop/order">我的订单</router-link>
          </div>
        </el-col>
        <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="6">
          <div class="grid-content bg-purple">关于我们</div>
        </el-col>
        <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="6">
          <div class="grid-content bg-purple">
            <el-button type="text" size="small" @click="exit()">退出</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  methods: {
    exit () {
      sessionStorage.clear()
      this.$axios.get('/logout', {
        headers: {
          authorization: sessionStorage.getItem('token')
        }
      }, { }
      ).then((res) => {
        console.log(res)
      }).catch(err => {
        console.error(err)
      })
      this.$router.replace('/login')
    }
  }
}
</script>
<style lang="less" scoped>
.nav {
  width: 99vw;
}
.bg-purple-dark {
  background: #d8d9d9;
}
.bg-purple {
  background: #d8d9d9;
}
.bg-purple-light {
  background: #d8d9d9;
}
.grid-content {
  line-height: 35px;
  min-height: 36px;
  text-align: center;
  border-left: 1px solid rgb(199, 205, 205);
}
a {
  text-decoration: none;
  color: black;
}
</style>
